<template>
  <div class="app-container">
    <div id="normalHeightCharts" v-loading="loading" :style="{width: '700px', height: '300px'}"></div>

    <p></p>
    <div class="zeng_box">
      <div style="display:flex">
        <div class="btn">{{childInfo.nickname}}身高{{childInfo.height}}cm</div>
        <div class="btn">父身高{{childInfo.heightDad}}cm</div>
        <div class="btn">母身高{{childInfo.heightMum}}cm</div>
      </div>
    </div>

    <div class="explain_lable">
      <div class="new_font">{{childInfo.nickname}}成年预测身高为：</div>
      <div class="number_font">{{childInfo.heightInherit}}cm</div>
      <div class="new_font">{{childInfo.nickname}}长到理想身高 ( >{{aimHeightProbability.height}}cm ) 概率为：</div>
      <div class="number_font">{{aimHeightProbability.cumulativeProbability}}%</div>
      <div class="font_tip">触控图表可查看不同理想身高概率</div>
      <div class="font_tip">每次录入新身高会重新计算</div>
    </div>

    <div class="explain">
      <div class="font_h2">以上计算已考虑三项关键因素：</div>
      <div>1.个体遗传条件。</div>
      <div>2.当前实测身高与当前遗传身高的偏差。</div>
      <div>3.中国80后、90后和95后成年身高平均变化幅度</div>

      <div style="font-size:22px;color:#a7a6a6">基础大数据来源：《中华人民共和国卫生行业标准WS/T 612-2018》</div>
    </div>
  </div>
</template>
<style >
/* components/normdist/index.wxss */
.container {
  background: #faf9fc;
}

.sjx_icon {
  width: 0;
  height: 0;
  border-width: 16px;
  border-style: solid;
  position: absolute;
  right: -16px;
  bottom: 52px;
}

.tab_row .th {
  width: 25%;
  height: 60px;
}

.tab_row .td {
  width: 25%;
}

.chooseDate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  font-size: 28px;
}

.chooseDate > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dateFirst {
  width: 122px;
  height: 38px;
  font-size: 22px;
  color: #83c628;
  border: 1px solid #83c628;
  border-radius: 5px;
}

.dateFirst.bg,
.dateTwo.bg {
  color: #fff;
  background: #83c628;
}

.zeng_box {
  display: flex;
  margin-top: -30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 75px;
}

.zeng_box .t1 {
  font-size: 25px;
  line-height: 1.9;
  padding-left: 61px;
}

.zeng_box .btn {
  padding: 6px 16px;
  font-size: 22px;
  color: #83c628;
  margin-left: 20px;
  border: 1px solid #83c628;
  border-radius: 5px;
}

.zeng_box .btn.bg {
  color: #fff;
  background: #83c628;
}

.dateTwo {
  width: 125px;
  height: 40px;
  font-size: 22px;
  color: #83c628;
  border: 1px solid #83c628;
  border-radius: 5px;
}

.recCon {
  display: flex;
  align-items: center;
}

.chooseDate image {
  width: 40px;
  margin-left: 5px;
}

.t_head {
  border: 1px solid #83c728;
}

.t_body .tr {
  border: 1px solid #83c728;
}

.t_body .tr {
  border-top: none;
}

.tab_clum .th {
  border-right: 1px solid #83c728;
}

.tab_clum .th:nth-child(3) {
  border-right: none;
}

.t_body .td {
  border-right: 1px solid #83c728;
}

.t_body .td:nth-child(3n) {
  border-right: none;
}

.t_body .th {
  border-right: 1px solid #83c728;
}

.tab_row .t_head:nth-child(2) {
  border-top: none;
}

.tab_row .td:nth-child(4n) {
  border-right: none;
}

.tab_row .td {
  border-right: 1px solid #83c728;
}

.tab_row .th {
  border-right: 1px solid #83c728;
}

.th {
  background: #e6f4d4;
  font-size: 24px;
  color: #4b4b4b;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.td {
  font-size: 24px;
  color: #4b4b4b;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
}

.t_head {
  display: flex;
}

.tab {
  padding: 48px 30px;
  background: #ffffff;
}

.tab_clum .th {
  width: 33.3%;
  height: 60px;
}

.tab_clum .td {
  width: 33.3%;
  height: 60px;
}

.tab_clum {
  margin-top: 45px;
}

.tr {
  display: flex;
}

.left {
  padding-left: 40px;
}

.right {
  padding-left: 0;
  justify-content: center;
}

.center {
  padding: 0;
  justify-content: center;
}

.realHigh {
  margin-top: 20px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 32px 32px 105px;
}

.realTitle {
  display: block;
  font-size: 38px;
  color: #3b3b3b;
  font-weight: bold;
}

.realSize {
  font-size: 38px;
  color: #3b3b3b;
  font-weight: bold;
}

.stutas {
  padding: 0 10px;
  font-size: 20px;
  color: #67c62c;
  border: 1px solid #67c62c;
  div-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.high {
  display: flex;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
  position: relative;
}

.my_line {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0px;
  border-bottom: 1px solid #efefef;
  position: relative;
  margin-bottom: 70px;
}

.chart_bottom {
  font-size: 22px;
  color: #a7a6a6;
  div-align: center;
}

.chart1_info {
  margin-top: 64px;
  font-size: 26px;
  color: #4b4b4b;
  padding: 0 26px;
  border-left: 2px solid #67c62c;
}

.chart1_info2 {
  padding: 44px 26px 0;
  font-size: 26px;
  line-height: 1.6;
  color: #a7a6a6;
}

.chart1_info div {
  margin-bottom: 20px;
  display: block;
}

.infomation {
  position: absolute;
  width: 22px;
  height: 22px;
  right: 0;
  overflow: auto;
  bottom: 10px;
  padding: 20px;
}

.highdiv {
  display: flex;
  flex-direction: column;
  font-size: 22px;
  color: #ffffff;
  align-items: center;
}

.piangao {
  width: 100px;
  background: #2cb9c6;
  div-align: center;
  color: #2cb9c6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jiaogao {
  width: 100px;
  background: #2cc69d;
  div-align: center;
  color: #2cc69d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zhengchang {
  width: 100px;
  background: #67c62c;
  div-align: center;
  color: #67c62c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pianai {
  width: 100px;
  background: #9dc62c;
  div-align: center;
  color: #9dc62c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aixiao {
  width: 100px;
  background: #fead37;
  div-align: center;
  color: #fead37;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shiji {
  margin-left: 280px;
}

.contrast {
  position: relative;
}

.zhixiang_ {
  display: flex;
  align-items: center;
  position: absolute;
  left: 10px;
  bottom: 0;
  height: 0;
}

.zhixiang_ .now {
  margin-top: -5px;
}

.zhixiang {
  width: 300px;
  position: relative;
}

.highInfo {
  display: flex;
  margin: 80px 0;
}

.contrast > div {
  color: #ffffff;
}

.standard {
  position: absolute;
  bottom: 0;
  left: -200px;
  width: 200px;
  font-size: 26px;
  color: #6d6d6d;
  border-bottom: 1px solid #e9e9e9;
  line-height: 30px;
  display: flex;
  box-sizing: border-box;
  padding-left: 20px;
}

.standard.after {
  font-size: 42px;
  color: #4b4b4b;
  line-height: 55px;
  padding-left: 0;
}

.standard.after:after {
  content: "遗传身高";
  position: absolute;
  top: -48px;
  left: 0;
  color: #9c9c9c;
  font-size: 23px;
}

.now_high {
  position: absolute;
  left: 60px;
  display: flex;
  align-items: center;
  line-height: 0;
  height: 0;
}

.now_high.after:after {
  content: "实际身高";
  position: absolute;
  top: -64px;
  left: 25px;
  font-size: 23px;
  color: #9c9c9c;
}

.nowSize {
  font-size: 64px;
  margin-left: 5px;
  font-weight: bold;
}

.checkcolor_a {
  color: #2cb9c6;
}

.checkcolor_b {
  color: #2cc69d;
}

.checkcolor_c {
  color: #67c62c;
}

.checkcolor_d {
  color: #9dc62c;
}

.checkcolor_e {
  color: #fead37;
}

.nowdanwei {
  font-size: 40px;
}

.sanjiao {
  height: 20px;
  width: 20px;
}

.beizhu {
  font-size: 22px;
  color: #6d6d6d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explain_lable {
  font-size: 26px;
  color: #4b4b4b;
  box-sizing: border-box;
  line-height: 44px;
  padding: 0 30px;
  border-left: 2px;
}

.explain {
  font-size: 26px;
  color: #4b4b4b;
  box-sizing: border-box;
  line-height: 38px;
  padding: 0 26px;
  /* margin: 70px 30px 0 30px; */
  border-left: 2px solid #67c62c;
}

.font_h2 {
  margin: 20px 0;
}

.font_tip {
  font-size: 26px;
  color: #83c628;
  box-sizing: border-box;
}

.new_font {
  font-size: 30px;
}

.number_font {
  font-size: 40px;
  line-height: 75px;
  font-weight: 600;
  margin-bottom: 20px;
}

.zengzhong {
  box-sizing: border-box;
  padding: 32px 32px 105px;
  margin-top: 22px;
  background: #ffffff;
}

.stutas_pd {
  padding: 0 10px;
  font-size: 20px;
  color: #fead37;
  border: 1px solid #fead37;
  div-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.stutas_pg {
  padding: 0 10px;
  font-size: 20px;
  color: #2cb9c6;
  border: 1px solid #2cb9c6;
  div-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.stutas_jg {
  padding: 0 10px;
  font-size: 20px;
  color: #2cc69d;
  border: 1px solid #2cc69d;
  div-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.stutas_pa {
  padding: 0 10px;
  font-size: 20px;
  color: #9dc62c;
  border: 1px solid #9dc62c;
  div-align: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.divLeft {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.div_weight {
  width: 56px;
  display: flex;
  height: 112px;
  font-size: 24px;
  background: #75ce3e;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #75ce3e;
}

.div_weight > div {
  color: #ffffff;
}

.divLeft .standard {
  width: 140px;
  left: -140px;
  padding: 0;
  font-size: 35px;
  line-height: 40px;
}

.divLeft .nowSize {
  font-size: 52px;
}

.divLeft .nowdanwei {
  font-size: 34px;
}

.divLeft .now_high {
  right: -124px;
}

.div_weight_ {
  width: 56px;
  display: flex;
  height: 112px;
  font-size: 24px;
  background: #fead37;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #fead37;
}

.div_weight_ > div {
  color: #ffffff;
}

.divRit {
  width: 46%;
  font-size: 26px;
  color: #4b4b4b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zengzhong_div {
  display: flex;
  justify-content: space-between;
  margin: 80px 0;
}

.weightBeizhu {
  width: 520px;
  color: #6b6b6b;
  font-size: 22px;
  display: flex;
  margin: auto;
  div-align: center;
}

.div_weight_y {
  width: 56px;
  display: flex;
  height: 226px;
  font-size: 24px;
  background: #75ce3e;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #75ce3e;
}

.div_weight_y > div {
  color: #ffffff;
}

.div_weight_p {
  width: 56px;
  display: flex;
  height: 158px;
  font-size: 24px;
  background: #fead37;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  color: #fead37;
}

.div_weight_p > div {
  color: #ffffff;
}

.div_weight_3 {
  width: 100px;
}

.div_weight_3 .now_high.after,
.div_weight_31 .now_high.after {
  left: 110px;
}

.div_weight_3 .now_high .now,
.div_weight_31 .now_high .now {
  margin-top: 8px;
}

.div_weight_31 {
  width: 100px;
}

.new1 {
  /* margin:40px 40px 0px;
  position: relative; */
  width: 100%;
  margin-top: 30px;
}

.divLeft_new {
  width: 100%;
  display: flex;
  align-items: center;
}

.div_weight_new {
  height: 60px;
  background: #fead37;
}

.div_weight_new1 {
  height: 60px;
  background: #e0e0e0;
}

.divLeft_new_percent {
  margin-top: 20px;
  display: flex;
  color: #353535;
  font-size: 26px;
  justify-content: space-between;
}

.new_left_percent {
  position: absolute;
  top: -90px;
  color: #83c628;
  font-size: 66px;
  line-height: 32px;
  div-align: center;
}

.new_num {
  position: absolute;
  top: -120px;
  right: -68px;
  font-size: 60px;
}

.new_num > div {
  font-size: 40px;
}

.divLeft_new_percent > div {
  width: 56px;
}

.divLeft_ {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 30px;
}

.predict {
  box-sizing: border-box;
  padding: 32px;
  margin-top: 22px;
  background: #ffffff;
}

.yuce {
  color: #4c4c4c;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}

.predictHigh {
  font-size: 64px;
  color: #75ce3e;
  margin-top: 38px;
  font-weight: bold;
}

.hi {
  font-size: 40px;
  font-weight: normal;
}

.fenxi {
  box-sizing: border-box;
  padding: 32px;
  margin-top: 22px;
  background: #ffffff;
}

.fenxiInfo {
  font-size: 26px;
  color: #4c4c4c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.jieguo {
  padding: 20px 60px;
  color: #ffffff;
}

.jieguo {
  display: block;
  padding: 10px 50px;
  color: #ffffff;
  background: #83c628;
  font-size: 48px;
  div-align: center;
  border-radius: 48px;
  margin-top: 61px;
}

.sanjiao_ {
  width: 20px;
  height: 20px;
}

.divPos_ .now_high {
  left: 60px;
}

.divPos .now_high {
  left: 60px;
  width: 170px;
}

.stutas_high {
  padding: 0 10px;
  color: #fead37;
  font-size: 20px;
  border: 1px solid #fead37;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.youli {
  padding: 0 10px;
  color: #83c628;
  font-size: 20px;
  border: 1px solid #83c628;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.container1 {
  width: 100%;
}

.ec-canvas {
  width: 100%;
  height: 100%;
}

canvas {
  width: 80%;
  height: 680px;
}

.infomation-side {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9;
  white-space: inherit;
  transform: translateX(-50%) translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  min-width: 260px;
  max-width: 460px;
  height: auto;
  border-radius: 12px;
  line-height: 1.5;
  padding: 26px;
  font-size: 24px;
  color: #fff;
}

.infomation-side cover-div {
  white-space: inherit;
  line-height: 1.4;
}
</style>
<script>
import { listChildHeightNormalCharts } from "@/api/child/height";

import echarts from "echarts";

export default {
  name: "normalHeightCharts",
  props: {
    childId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    childData: {
      type: Object,
      default: () => {
        return {
          ageNum: undefined,
          avatar: undefined,
          birthday: undefined,
          childId: undefined,
          childType: 1,
          familyCode: undefined,
          height: 0,
          heightDad: 0,
          HeightNormal: 0,
          heightMum: 0,
          nickname: undefined,
          sex: 1,
          weight: 0
        };
      }
    }
  },

  data() {
    return {
      loading: false,
      aimHeightProbability: {},
      childInfo: {}
    };
  },

  mounted() {
    this.getNormalChartData();
  },
  watch: {
    //监听子控件内容的改动,发送给父级组件
    childId: {
      handler(newValue, oldValue) {
        this.getNormalChartData();
      },
      deep: true
    }
  },
  methods: {
    getNormalChartData() {
      this.loading = true;
      let cumulativeProbability = [];
      let x = [];
      let y = [];
      listChildHeightNormalCharts(this.childId).then(response => {
        this.loading = false;

        let that = this;
        this.aimHeightProbability = response.data.aimHeightProbability;
        this.childInfo = response.data.childData;
        cumulativeProbability = response.data.cumulativeProbability;
        x = response.data.x;
        y = response.data.y;

        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(
          document.getElementById("normalHeightCharts")
        );

        let colors = ["rgb(131,198,40)"];
        var option = {
          color: colors,
          legend: {
            show: false,
            data: ["预测概率"],
            icon: "roundRect",
            bottom: 0,
            itemWidth: 20,
            itemGap: 15,
            selected: {
              预测概率: true
            }
          },

          grid: {
            top: "9%",
            left: "8%",
            right: "6%",
            bottom: "18%"
          },
          parallel: {
            bottom: "22%"
          },

          xAxis: {
            name: "CM",
            type: "category",
            nameGap: 0,
            namedivStyle: {
              padding: [29, 0, 0, 0],
              color: "#4b4b4b",
              fontSize: 11
            },
            axisTick: { show: false },
            axisLabel: {
              color: "#666"
            },
            data: x
          },
          yAxis: [
            {
              name: "密度",
              max: 0.09,
              axisLine: {
                lineStyle: {
                  color: "#999"
                }
              },
              namedivStyle: {
                padding: [0, 22, 0, 0],
                color: "#4b4b4b",
                fontSize: 11
              },
              splitLine: {
                lineStyle: {
                  color: ["rgba(204,204,204,0.4)"],
                  type: "dotted"
                }
              }
            }
          ],
          series: [
            // data: res.data.data.series_data
            {
              name: "预测概率",
              type: "bar",
              barGap: 0,
              label: {
                normal: {
                  show: false,
                  position: "inside"
                }
              },
              data: y
            }
          ],
          tooltip: {
            trigger: "axis",
            position: { right: 10, top: 30 },
            formatter: function(params) {
              let list = params.length;
              let txt = "成年身高＞" + params[0].name + "cm" + "\n";
              //查询该点累积概率
              let probability = cumulativeProbability[params[0].dataIndex];
              txt = txt + "累积概率：" + probability + "%";
              //设置用户选中理想值的数据
              let _aim_data = {
                height: params[0].name,
                cumulativeProbability: probability
              };
              that.aimHeightProbability = _aim_data;
              return txt;
            }
          }
        };

        this.chart.setOption(option);
      });
    }
  }
};
</script>